<template>
  <div>
  <div class="abc">
    <ul>
      <li v-for="(item,i) in lis" :key='i'>{{item}}</li>
    </ul>
    </div>
    <br><br><br>
    <el-button @click='initWebsocket'>开始</el-button> 
    <br><br><br>

      聊天框：<input type="text" v-model="sendsms"> <button @click="send">发送</button>
  </div>
</template>

<script>
export default {
  data(){
    return{
      mes:'',
      ws:'',
      sendsms:'',
      lis:[]
    }
  },
  methods: {
    initWebsocket(){
      this.ws = new WebSocket("ws://127.0.0.1:8005/ws?id=100&name=客服")
      this.ws.onopen=function(){
        alert("success")
      }
      this.ws.onmessage=(data)=>{
        console.log(JSON.parse(data.data)['msg'])
        this.lis.push(JSON.parse(data.data)['data'])

      }

      this.ws.onclose=function(){
        alert("close")
      }
    },
    send(){
        var m='客服说：'+this.sendsms
        this.lis.push(m)
        var n=JSON.stringify({'id':1,'mes':m})
        this.ws.send(n)
    }
  },
  mounted() {
    
  },

}
</script>

<style>
.abc{
  width: 500px;
  height: 600;
  background-color: rgb(176, 237, 245);
  margin: auto;
}
</style>
 